<template>
    <div>
        <div class="frame">
            <div class="center">
                <div class="number">
                    <div class="one-one"></div>
                    <div class="one-two"></div>
                    <div class="zero-one"></div>
                    <div class="zero-two"></div>
                </div>
                <span class="big">Days</span>
                <span class="small">CSS Challenge</span>
            </div>
        </div>
        <btn-group :data="data"></btn-group>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import btnGroup from "../../../src/components/FooterButton/index.vue";
export default {
  name: "cssChallengeDay1",
  components: {
    btnGroup
  },
    data(){
      return {
          data:null
      }
    },
  created() {
    this.data= this.$route.params
    console.log(this.data)
  }
}
</script>

<style lang="scss" scoped>
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  background: #43389F;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0;
  background: -webkit-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  background: -moz-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  background: -o-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  background: linear-gradient(to top right, #43389F 0%, #4ec6ca 100%);
  //滤镜
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#43389F', endColorstr='#4ec6ca', GradientType=1);
  font-family: 'Courier New', 'Courier', sans-serif;
  color: #fff;
  //对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服
  -webkit-font-smoothing: antialiased; /*chrome、safari*/
  -moz-osx-font-smoothing: grayscale; /*firefox*/
}
.center{
  position: absolute;
  top: 50.8%;
  left: 50.5%;
  transform: translate(-50%,-50%);
}
.number{
  position: relative;
  height: 100px;
  width: 200px;
  //background-color: pink;
  .one-one {
    position: absolute;
    z-index: 1;
    //top: 0;
    left: -16px;
    height: 40px;
    width: 20px;
    background: #fff;
    border-radius: 3px;
    transform: rotate(50deg);
    //transform三大属性：rotate(旋转)
    //scale(缩放)
    //translate(移动)
    //其他属性：skew(扭曲)
    //matrix(矩阵变形)
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
  }
  .one-two{
    position: absolute;
    z-index: 10;
    height: 100px;
    width: 24px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
  }
  .zero-one,
  .zero-two {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 17px;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 24px solid #fff;
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
  }
  .zero-two{
    z-index: 6;
    left: 100px;
  }
}
.big{
  position: relative;
  z-index: 20;
  display: block;
  font-size: 82px;
  line-height: 60px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
}
.small {
  position: relative;
  z-index: 20;
  display: block;
  font-size: 23px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}
</style>